<template>
	<view>
		<!-- 导航栏 -->
		<view>
			<uni-nav-bar 
			class="nav" 
			color="white" 
			left-icon="back" 
			left-text="返回" 
			title="等待考试开始"
			backgroundColor="#007AFF" 
			@clickLeft="back()">
			</uni-nav-bar>
		</view>
		<!-- 弹出框 -->
		<view>
			<l-modal 
			ref="customModal" 
			:isShowModal="isShowModal" 
			@onClickConfirm="confirm" 
			@onClickCancel="cancel">
				<!-- modalTitle="温馨提示" -->
			<template>
				<p style="text-align: center;">您确定要离开吗？</p>
			</template>
			</l-modal>
		</view>
		<view class="all">
			<!-- 考试信息 -->
			<view class="test-info">
				<view class="test-left-nothing"></view>
				<view class="test-info-all">
					<view class="test-info-1">
						<!-- 考试名称 -->
						<view style="height: 15rpx;"></view>
						{{testMsg.testName}}
					</view>
					<!-- 考试时间 -->
					<view class="test-info-2">
						<view>考试时间：</view>
						<view class="test-info-2-2"></view>
						<view>{{testMsg.testTime}}</view>
					</view>
					<!-- 考试班级 -->
					<view class="test-info-2">
						<view>考试班级：</view>
						<view class="test-info-2-2"></view>
						<view>{{testMsg.testClass}}</view>
					</view>
					<!-- 考试信息 -->
					<view class="test-info-2">
						<view>考试信息：</view>
						<view class="test-info-2-2"></view>
						<view>{{testMsg.paperMsg.choiceNum}}道选择题、{{testMsg.paperMsg.judgeNum}}道判断题、{{testMsg.paperMsg.fillNum}}道填空题、{{testMsg.paperMsg.shortAnswerNum}}道简答题</view>
					</view>
					<view class="test-info-else">总分：100分</view>
				</view>
			</view>
			<!-- 考试信息隔离条 -->
			<view>
				<hr style="border: 0.01px solid #DCDCDC;" />
			</view>
			<!-- 头像区域 -->
			<view class="test-info-img"> 
				 <image class="test-info-img" src="../../static/icons/test.png"></image>
			</view>
			<!-- 考试时间区 -->
			<view class="test-info-timebar">
				<view class="test-info-timebar-1"></view>
				<view class="test-info-timebar-2">
					<view class="test-info-timebar-2-1">
						<button
						 class="button" 
						 @click="accessTest" 
						 :disabled="disabled">
							{{ content }}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import {filetestRoom} from '../../api/file.js'

	export default {
		data() {
			return {
				testMsg: {},
				content: '距离考试还有', // 按钮里显示的内容
				startTime: "", //考试开始时间
				disabled: true, //按钮禁用
				code:'',
				studentNum:'',
				isShowModal: false,
				path: '/pages/login/login',
				hours:0,
				minutes:0,
				seconds:0,
				token:uni.getStorageSync('token'),
			}
		},
		created() {
			this.getMsg();
		},
		methods: {
			accessTest(){
				this.getQuestions();//获取考试信息
				//计算考试剩余时间
				var hour=1-Number(this.hours)
				var minute=40-Number(this.minutes)
				var second=0-Number(this.seconds)
				if (second<0){
					minute--
					second+=60
					if (minute<0){
						hour--
						minute+=60
					}
				}
				uni.setStorageSync('minute',minute);
				uni.setStorageSync('hour',hour);
				uni.setStorageSync('second',second);
				uni.navigateTo({
					url:"../testing/testing"
				})
			},
      getQuestions() {      //获取考试题目信息，保存到vuex的公共仓库中
        this.$store.dispatch("getQuestions",{paperId:this.testMsg.paperMsg.paperid,token:this.token});
        console.log("this.$store.state.questions:",this.$store.state.questions);
      },
			getMsg() {
        const testCode = uni.getStorageSync("testCode");
        const studentNum = uni.getStorageSync("studentNum");
        const msg = {studentNum, testCode};
        console.log("testRoom传输到的信息:",msg);
				filetestRoom(msg).then(res =>{
					console.log("testRoom接受到的考试界面信息:",res);
					this.testMsg = res.data.data.testMsg;//将获取的考试信息保存到testMsg里
          uni.setStorageSync("paperId",this.testMsg.paperMsg.paperid)
		  uni.setStorageSync("count",this.testMsg.paperMsg.choiceNum+this.testMsg.paperMsg.judgeNum+this.testMsg.paperMsg.fillNum)
          console.log(this.testMsg);
          console.log("paperId",this.testMsg.paperMsg.paperid)
          this.startTime = this.testMsg.testTime.slice(0,16);
          console.log("开始时间：",this.startTime);
          this.getTime();
				})
			},
			back() {
				this.isShowModal = true
			},
			cancel() {
				this.isShowModal = false
			},
			confirm() {
				this.isShowModal = false;
        this.$router.push(this.path)
			},
      getTime(){
        //定义flag判断date3值的正负
        var flag=0
        var date = new Date();
        var seperator1 = "-";
        var year1 = date.getFullYear();
        var month1 = date.getMonth() + 1;
        var hour1 = date.getHours();
        var minutes1 = date.getMinutes();
        var seconds1 = date.getSeconds();
        var strDate = date.getDate();
        if (month1 >= 1 && month1 <= 9) {
          month1 = "0" + month1;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentTime = year1 + seperator1 + month1 + seperator1 + strDate + "  " + hour1 + ":" + minutes1 + ":" +
            seconds1;
        var date1 = new Date(currentTime); //当前时间
        console.log('考试开始时间:',this.startTime)
        var date2 = new Date(this.startTime); //考试开始时间
        var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
        console.log("data3:",date3)
        console.log("data1",date1)
        console.log("data2",date2)
        if (date3<0){
          flag=1
          date3=date1.getTime() - date2.getTime();
        }
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000));

        //计算出小时数
        var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000));
        //计算相差分钟数
        var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000));
        //计算相差秒数
        var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
        var seconds = Math.round(leave3 / 1000);

        this.canClick = false
        if (flag==0){
          console.log(" 用时： " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
          this.content = '距离考试开始' + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
          let clock = window.setInterval(() => {
            seconds--
            this.content = '距离考试开始' + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
            if (seconds == 0 && (minutes - 1 > 0 || hours - 1 > 0 || days - 1 > 0)) {
              minutes--
              seconds = 60
              if (minutes < 0 && (hours - 1 >= 0 || days - 1 > 0)) {
                hours--
                minutes = 59
                if (hours == 0 && days - 1 >= 0) {
                  days--
                  hours = 23
                }
              }
            }
            if (seconds < 0) {
              window.clearInterval(clock)
              this.content = '开始考试'
              this.disabled = false
            }
          }, 1000)}
        else if (flag==1){
          console.log(" 用时： " + days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
          let clock = window.setInterval(() => {
			  seconds++
			  this.seconds=seconds
			  this.hours=hours
			  this.minutes=minutes
			  if (seconds == 60) {
			    minutes++
			    seconds = 0
			    if (minutes == 60 ) {
			      hours++
			      minutes = 0
			      if (hours == 24 ) {
			        days++
			        hours = 0
			      }
			    }
			  }
            if (days>0||hours>=2||hours>=1&&minutes>40){
              window.clearInterval(clock)
              this.content = '抱歉<_>，考试时间已过'
            }
            else {
              window.clearInterval(clock)
              this.content = '开始考试'
              this.disabled = false
            }

          }, 1000)}
      }
    }
	}
</script>

<style lang='scss' scoped>
	.nav {
		background-color: #007AFF;
		font-size: 200px;
	}

	/* 在这里对自定义的导航栏调整样式无效果，只能在便签里才能有效果 */
	.all {
		/* background-color: #F1F1F1;
	height: 100%;
	w */
		width: 100%;
	}

	.test-info {
		height: 250rpx;
		width: 100%;
		/* background-color: #4CD964; */
		display: flex;
	}

	.test-info-all {
		height: 100%;
		width: 94%;
	}

	.test-info-1 {
		height: 70rpx;
		width: 100%;
		/* background-color: #8F8F94; */
	}

	.test-info-2 {
		height: 45rpx;
		width: 100%;
		/* background-color: #DD524D; */
		color: #999999;
		font-size: 12rpx;
		display: flex;
	}

	.test-info-2-2 {
		width: 2rpx;
		height: 100%;
	}

	.test-info-else {
		font-size: 12rpx;
		color: #999999;
		height: 37rpx;
	}

	.test-left-nothing {
		width: 6%;
		height: 95%;
		/* background-color: #007AFF; */
	}

	.hrcss {
		border: 50rpx;
	}

	.title {}

	.test-info-img {
		height: 620rpx;
		width: 100%;
		background-color: #4CD964;
	}

	.test-info-timebar-1 {
		height: 20rpx;
		width: 100%;
		/* background-color: #007AFF; */
	}

	.test-info-timebar-2 {
		height: 80rpx;
		width: 100%;
		/* background-color: #DD524D; */
	}

	.test-info-timebar-2-1 {
		/* position: absolute; */
		margin: auto;
		height: 100%;
		width: 90%;
		background-color: rgba(236, 240, 241, 1);
		text-align: center;

	}

	.test-info-timebar-2-1-1 {
		padding-top: 15rpx;
		text-align: center;
		background-color: rgba(236, 240, 241, 1);
	}
</style>
